import { Slider, GroupBox, HorizontalBox, VerticalBox } from "std-widgets.slint";


export component PlotCanva inherits Window {
    in-out property <float> freq: 1;
    in-out property <float> amp: 1;
    in-out property <float> phase: 0;
    in-out property <float> offset: 0;

    pure callback render_plot(/*freq*/ float, /*amp*/ float, /*phase*/ float, /*offset*/ float) -> image;

    min-width: 600px;  // 最小宽度
    max-width: 1920px; // 最大宽度
    min-height: 400px; // 最小高度
    max-height: 1080px; // 最大高度
    // horizontal-stretch: 0;
    // vertical-stretch: 0; // 允许水平和垂直方向拉伸
    title: "PlotCanva";
    VerticalBox {
        Text {
            font-size: 10px;
            text: "sin wave";
            horizontal-alignment: center;
        }

        plotarea:=Image {
            width: 800px;
            height: 600px;
            source: root.render_plot(root.freq, root.amp, root.phase, root.offset);
            // source: @image-url(".\\resources\\fat-programmer-with-glasses-sketch.jpg");
            tp := TouchArea {

            }
        }
        Text {
            text: "x: " + tp.mouse-x/1px + " y: " + tp.mouse-y/1px + " ";
        }
        HorizontalBox {
            Text {
                text: "freq:"+ root.freq;
                font-weight: 600;
                vertical-alignment: center;
                width: 80px;
            }
            freq-slider := Slider {
                minimum: 1;
                maximum: 10;
                value <=> root.freq;
            }
        }

        HorizontalBox {
            Text {
                text: "amp:"+ root.amp;
                font-weight: 600;
                vertical-alignment: center;
                width: 80px;
            }
            amp-slider := Slider {
                minimum: 0;
                maximum: 10;
                step: 0.1;
                value <=> root.amp;
            }
        }

        HorizontalBox {
            Text {
                text: "phase:"+ root.phase;
                font-weight: 600;
                vertical-alignment: center;
                width: 80px;
            }
            phase-slider := Slider {
                minimum: 0;
                maximum: 360;
                step: 1;
                value <=> root.phase;
            }
        }

        HorizontalBox {
            Text {
                text: "offset:"+ root.offset;
                font-weight: 600;
                vertical-alignment: center;
                width: 80px;
            }
            offset-slider := Slider {
                minimum: -10;
                maximum: 10;
                value <=> root.offset;
            }
        }
    }
}
